import { PerspectiveCamera, Scene } from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import Base from "./Base";
import type Size from "./Size";
import { gsap } from "gsap";

export default class Camera {
  private size: Size;
  private scene: Scene;
  private canvas: HTMLCanvasElement;
  public perspectiveCamera: PerspectiveCamera;
  // private controls: OrbitControls;

  constructor() {
    const base = Base.getInstance();
    this.size = base.size;
    this.scene = base.scene;
    this.canvas = base.canvas;

    this.perspectiveCamera = this.createPerspectiveCamera();
    this.scene.add(this.perspectiveCamera);
    this.changePerspectiveCameraPositionGroup();
  }
  private createPerspectiveCamera() {
    const perspectiveCamera = new PerspectiveCamera(
      35,
      this.size.aspect,
      0.1,
      1000
    );
    perspectiveCamera.position.set(0, 10, 0);
    return perspectiveCamera;
  }

  //通过gsap 动画移动相机,从而实现看似物体在运动的效果
  // 1.添加动画
  private changePerspectiveCameraPosition() {
    // 添加一个动画
    gsap.to(this.perspectiveCamera.position, {
      x: 5,
      z: 5,
      duration: 5,
    });
  }

  //2. 通过timeline 添加一组动画
  // 参考连接: https://juejin.cn/post/7041862990622605349
  private changePerspectiveCameraPositionGroup() {
    const tl = gsap.timeline();
    // 添加一组动画
    tl.to(this.perspectiveCamera.position, {
      x: 5,
      z: 5,
      duration: 3,
    })
      .to(this.perspectiveCamera.position, {
        x: -5,
        z: 5,
        duration: 3,
      })
      .to(this.perspectiveCamera.position, {
        x: 5,
        z: 5,
        duration: 3,
      });
  }

  public resize() {
    // Updating Perspective Camera on Resize
    this.perspectiveCamera.aspect = this.size.aspect;
    this.perspectiveCamera.updateProjectionMatrix();
  }
}
